<template>
  <div class="app-container home" style="height: 100%;width:100%;margin:0 0 0 0;overflow:hidden hidden;">
    <!-- 第一行  -->
    <el-row>
      <el-col :span="12">
        <div class="build" >
          <div class="title1"><span style="font-size: 15px">型材生产数据</span></div>
          <ul >
            <li class="liq">
              <div><strong>{{wks}}</strong>件</div>
              <span>未加工</span>
            </li>
            <li class="liq">
              <div><strong>{{yks}}</strong>件</div>
              <span>加工中</span>
            </li>
            <li class="liq">
              <div><strong>{{zt}}</strong>件</div>
              <span>加工暂停</span>
            </li>
            <li class="liq">
              <div><strong>{{wc}}</strong>件</div>
              <span>加工完成</span>
            </li >
            <li class="liq">
              <div><strong>{{qx}}</strong>件</div>
              <span>已取消</span>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="gaoJin">
          <ul >
            <li class="lia" >
               <i style="color: #ff4949; font-size: 50px" class="el-icon-message-solid"></i><br/>
                <span>告警</span>
            </li>
            <li class="lia">
              <div><strong>{{gjWjj}}</strong>件</div>
              <span>未解决</span>
            </li>
            <li class="lia">
              <div><strong>{{gjYjj}}</strong>件</div>
              <span>已解决</span>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <el-row style="height: 10px"></el-row>
    <!--第二行 快速入口-->
    <el-row>
      <el-col :span="24">
        <div class="build2" >
          <div class="title1"><span style="font-size: 15px">快速入口</span></div>
           <el-row>
             <el-col :span="2">
                  <!-- border: 1px red solid"-->
               <div style="text-align: center; margin-top: 15px; line-height: 10px; height:90px ;">
                  <a @click="route('line/production/batch')">
                    <i class="el-icon-receiving" style="font-size: 60px"><br/></i><br/>
                    <span>生产批次管理</span>
                  </a>
               </div>
             </el-col>
             <el-col :span="2">
               <!-- border: 1px red solid"-->
               <div style="text-align: center; margin-top: 15px; line-height: 10px; height:90px ;">
                 <a @click="route('line/alarm/log')">
                   <i class="el-icon-bell" style="font-size: 60px"><br/></i><br/>
                   <span>告警处理</span>
                 </a>
               </div>
             </el-col>
             <el-col :span="2">
               <!-- border: 1px red solid"-->
               <div style="text-align: center; margin-top: 15px; line-height: 10px; height:90px ;">
                 <a @click="route('line/configure/holeParam')">
                   <i class="el-icon-help" style="font-size: 60px"><br/></i><br/>
                   <span>孔位原点参数</span>
                 </a>
               </div>
             </el-col>
             <el-col :span="2">
               <!-- border: 1px red solid"-->
               <div style="text-align: center; margin-top: 15px; line-height: 10px; height:90px ;">
                 <a @click="route('line/configure/series')">
                   <i class="el-icon-s-operation" style="font-size: 60px"><br/></i><br/>
                   <span>基础材型数据</span>
                 </a>
               </div>
             </el-col>
             <el-col :span="2">
               <!-- border: 1px red solid"-->
               <div style="text-align: center; margin-top: 15px; line-height: 10px; height:90px ;">
                 <a @click="route('line/configure/param')">
                   <i class="el-icon-s-unfold" style="font-size: 60px"><br/></i><br/>
                   <span>产线参数</span>
                 </a>
               </div>
             </el-col>
             <el-col :span="2">
               <!-- border: 1px red solid"-->
               <div style="text-align: center; margin-top: 15px; line-height: 10px; height:90px ;">
                 <a @click="route('line/configure/mechanical')">
                   <i class="el-icon-s-finance" style="font-size: 60px"><br/></i><br/>
                   <span>机械参数</span>
                 </a>
               </div>
             </el-col>
             <el-col :span="2">
               <!-- border: 1px red solid"-->
               <div style="text-align: center; margin-top: 15px; line-height: 10px; height:90px ;">
                 <a @click="route('line/configure/materials')">
                   <i class="el-icon-notebook-2" style="font-size: 60px"><br/></i><br/>
                   <span>图纸名称映射</span>
                 </a>
               </div>
             </el-col>
<!--             <el-col :span="2">-->
<!--               &lt;!&ndash; border: 1px red solid"&ndash;&gt;-->
<!--               <div style="text-align: center; margin-top: 15px; line-height: 10px; height:90px ;">-->
<!--                 <div class="block" @click="toBigData" style="margin-bottom: 3px">-->
<!--                     <el-tooltip content="点击进入大屏页面" placement="top">-->
<!--                       <img style="margin-top: 10px" width="90%" height="auto" src="../assets/images/Bigdata.jpg"/>-->
<!--                     </el-tooltip>-->
<!--                 </div>-->
<!--                 <span >实时加工大屏</span>-->
<!--               </div>-->
<!--             </el-col>-->
           </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row style="height: 10px"></el-row>
    <!--第三行-->
    <el-row>
      <el-col :span="14" style="display: flex">
          <LineVue ref="inLine" style="height: 300px; width: 750px" :DivId="'home_right'" :isAreaOrNum="value3" :x-data="outXdata" :data="outData" :color="'#FFBB00'"  :title="'近十二个月的型材生产件数'">
          </LineVue>
      </el-col>
      <el-col :span="10">
        <!--<el-row>-->
          <!--<el-col>-->
            <!--<el-row style="height: 10px"></el-row>-->
            <!--<div class="block" id="a"  @click="toBigData">-->
              <!--<div class="bigData">-->
              <!--<div class="bigData2"><span class="demonstration" >实时加工大屏</span></div>-->
                <!--<el-tooltip content="点击进入大屏页面" placement="top">-->
                  <!--<img style="margin-top: 10px" width="60%" height="auto" src="../assets/images/Bigdata.jpg"/>-->
                <!--</el-tooltip>-->
              <!--</div>-->
            <!--</div>-->
          <!--</el-col>-->
        <!--</el-row>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import LineVue from '../views/chart/Line.vue'
import {getCount,getAlarm,getProduction} from "@/api/index";

export default {
  name: "index",
  components: {
    LineVue
  }, created() {
    this.outData=[];
    this.outXdata=[];
    this.getProductionCount();
    this.getCountXin(0);
    this.getCountXin(1);
    this.getCountXin(2);
    this.getCountXin(3);
    this.getCountXin(4);
    this.getAlarmCount(0);
    this.getAlarmCount(1);
  },
  data() {
    return {
      /** 未解决的告警 */
      gjWjj:0,
      /** 已解决的告警 */
      gjYjj:0,
      /** 未开始 */
      wks:0,
      /** 已开始 */
      yks:0,
      /** 暂停 */
      zt:0,
      /** 完成 */
      wc:0,
      /** 取消 */
      qx:0,
      // 版本号
      version: "3.6.0",
      value3:true,
      outXdata: [],
      outData: [0,0,0,0,0,0,0,0,0,0,0,4]
    };
  },
  methods: {
    /** 查询新材加工数据 */
    getCountXin(processingState){
      getCount(processingState).then(response=>{
        if (processingState==0){
          this.wks=response;
        }else if(processingState==1){
          this.yks=response;
        }else if(processingState==2){
          this.zt=response;
        }else if(processingState==3){
          this.wc=response;
        }else if(processingState==4){
          this.qx=response;
        }
      })
    },
    /** 查询告警数据 */
    getAlarmCount(state){
      getAlarm(state).then(response=>{
        if (state==0){
          this.gjWjj=response;
        }
        else if(state==1){
          this.gjYjj=response;
        }
      })
    },
    /** 查询生产批次数据 */
    getProductionCount(){
      getProduction().then(response=>{
        response.forEach((obj,index )=>{
         this.outXdata.push(obj.date)
         this.outData.push(obj.count);
        })
        JSON.parse(JSON.stringify(this.outXdata))
        JSON.parse(JSON.stringify(this.outData))
        this.$refs.inLine.resetRenderer()
      })
    },
    route(url){
      this.$router.push({path : url})
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    toBigData () {
      window.open('http://localhost:3000/')
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  .demonstration {
    margin-bottom:50px;
    margin-top:100px
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
  #a{
    text-align: center;
    height: 200px;
    font-size: 15px;
  }
  .build{
    height: 120px;
    border: 1px solid rgba(231,231,231,0.84);
  }
  .title1{
    background-color: #daecfe;
    border: 1px solid rgba(231,231,231,0.84);
    height: 30px;
    padding: 5px;
  }
  .liq{
    float:left;
    margin:10px;
    width: 17%;
    height: 70px;
    list-style-type:none;
    text-align :center;
    border-left: 1px solid rgba(231,231,231,0.84);
  }
  .liq:first-child{
    border-left: none;
  }
  strong{
    line-height:40px;
    font-size: 30px;
  }
  .lia{
    float:left;
    margin:22px;
    border-left: 1px solid #f8ac59;
    text-align :center;
    width: 20%;
  }
  .lia:first-child{
    border-left: none;
  }
    .gaoJin{
      height: 120px;
      width: 70%;
      float: right;
      background-color: #ffe6c9;
      border: 2px solid #f8ac59;
    }
    .build2{
      height: 150px;
      border: 1px solid rgba(231,231,231,0.84);
    }
    .bigData{
      height: 300px;
      border: 1px solid #97a8be;
    }
    .bigData2{
      background-color: #daecfe;
      text-align:center;
      font-size: 20px;
      border: 1px solid #97a8be;
      height: 30px;
    } #a{
    text-align: center;
    height: 200px;
    font-size: 15px;
  }
  .build{
    height: 120px;
    border: 1px solid rgba(231,231,231,0.84);
  }
  .title{
    background-color: #daecfe;
    border: 1px solid rgba(231,231,231,0.84);
    height: 30px;
    padding: 5px;
  }
  .liq{
    float:left;
    margin:10px;
    width: 16%;
    height: 70px;
    list-style-type:none;
    text-align :center;
    border-left: 1px solid rgba(231,231,231,0.84);
  }
  .liq:first-child{
    border-left: none;
  }
  strong{
    line-height:40px;
    font-size: 30px;
  }
  .lia{
    float:left;
    margin:25px;
    border-left: 1px solid #f8ac59;
    text-align :center;
    width: 20%;
  }
  .lia:first-child{
    border-left: none;
  }
    .gaoJin{
      height: 120px;
      width: 70%;
      float: right;
      background-color: #ffe6c9;
      border: 2px solid #f8ac59;
    }
    .build2{
      height: 150px;
      border: 1px solid rgba(231,231,231,0.84);
    }
    .bigData{
      height: 300px;
      border: 1px solid #97a8be;
    }
    .bigData2{
      background-color: #daecfe;
      text-align:center;
      font-size: 20px;
      border: 1px solid #97a8be;
      height: 30px;
    }
</style>

